import React from 'react';
import { applySnapshot, getSnapshot, types } from 'mobx-state-tree';
import { useLocalStore, useObserver } from 'mobx-react';
import { callApi } from '@/hooks/async';

const Widget = types.model({
  id: types.identifierNumber,
  row: 1,
  col: 1,
  rows: 3,
  cols: 4,
}).actions(self => {
  return {
    move() { },
    resize() { },
  }
});

const Layout = types.model({
  curId: 0,
  name: '',
  widgets: types.optional(types.map(Widget), {}),
}).actions(self => {
  return {
    addWidgetToDefaultPosition() {
      const widget = Widget.create({ id: ++curId });
      self.widgets.put(widget);
    },
    deleteWidget(widget: typeof Widget) {
      self.widgets.delete(String(widget.id));
    },
    save() {
      // call api with
      localStorage.set(`panel-${self.name}`, getSnapshot(self));
    },
    load() {
      applySnapshot(self, localStorage.get(`panel-${self.name}`));
    },
  }
});

export default function LayoutUI() {
  const layout = useLocalStore(() => Layout.create());
  return useObserver(() => (
    <div></div>
  ))
};
